<template>
    <div class="open-cover" @click="$emit('click-cover')">

        <div id="cover" :class="cover_show ? 'opening' : ''" @click.stop>

            <!--S头像-->
            <div class="header">
                <img v-lazy="red.owner_header" />
            </div>
            <!--S头像-->

            <!--S红包名字-->
            <div class="nickname">
                {{red.owner_nickname}}的红包
            </div>
            <!--E红包名字-->

            <!--S红包标题-->
            <div class="title">
                {{red.title}}
            </div>
            <!--E红包标题-->

            <!--S红包按钮-->
            <div class="open-button"
                 @click="clickOpenButton"
                 >
                開
            </div>
            <!--E红包按钮-->
        </div>

        <!--S开红包进度条-->
        <count-down
                v-show="under === 'opening'"
                :red_id="red.id"
                :value="progress"
                :total="count_total">
        </count-down>
        <!--E开红包进度条-->

        <!--S远程服务器请求加载-->
        <loading v-if="under === 'remoting'"></loading>
        <!--E远程服务器请求加载-->
    </div>
</template>

<script>
// 公用红包封面
import CountDown from "../count-down"
import Config from "@/config"
import {open, openCheck} from "@/util/open.js"
import Loading from "../loading"
// 开红包计时器
let openTimer = null
export default {
    name: "open-red-cover",
    data() {
      return {
          // 红包进度条当前进度
          progress: 0,
          // 是否已经提交红包表单
          submit_form: false
      }
    },
    props: {
        red_id: {
          default: 0
        },
        // 红包类型
        type: {
            type: String
        },
        // 红包数据
        red: {
            type: Object
        },
        // 红包进行状态
        under: {
            type: String,
            default: 'not'
        },
        // 图片数量
        imageNumber: {
            type: Number,
            default:1
        },
        // 视频长度
        videoTime: {
            type: Number,
            default:60
        },
        // 视频进度
        video_progress: {
            type: Number,
            default: 0
        }
    },
    computed: {
      // 开包倒计时总数
      count_total() {
          let total = 10
          if(this.type === 'image'){
              total = this.imageNumber * Config.imageRedChangeTime
          } else if(this.type === 'video') {
              total = this.videoTime
          }
          return total
      },
      // 红包封面显示状态
      cover_show() {
          if(this.under === 'opening' || this.under === 'remoting'){
            return true
          }
          return false
      },
      // 是否显示提交表单开红包
      show_submit_form() {
          return (this.red.red_form === '1' && !this.submit_form && !this.red.submit_form)
      }
    },
    components: {
        CountDown,
        Loading
    },
    watch: {
        // 红包状态改变
        under(value) {
            if(value === 'opening'){
                if(this.type === 'image'){
                    this.openImageRed()
                }
            } else if(value === 'not') {
                this.progress = 0
                clearInterval(openTimer)
            }
        },
        // 视频播放描述更改
        video_progress(value) {
            this.progress = value
            if(value === this.count_total){
                this.openVideoRed()
            }
        }
    },
    created() {
        clearInterval(openTimer)
    },
    activated() {
        clearInterval(openTimer)
    },
    deactivated() {
        clearInterval(openTimer)
    },
    destroy() {
        clearInterval(openTimer)
    },
    methods: {
        /**
         * 点击开红包按钮
         */
        clickOpenButton() {
            // 开始开红包
            if(!openCheck(this,this.red)) return
            this.$emit("changeUnder","opening")
        },
        /**
         * 开图片红包
         */
        openImageRed() {
            setTimeout(()=>{
                this.progress = 0
                openTimer = setInterval(() => {
                    if(this.progress >= this.count_total){
                        if(this.show_submit_form) {
                            let RedForm = this.$createRedForm({
                                is_show: true,
                                form_id: parseInt(this.red.red_form_id),
                                red_id: parseInt(this.red.id),
                                onClose:() => {
                                    RedForm.remove()
                                    this.$emit("changeUnder","not")
                                },
                                onSuccess: () => {
                                    this.submit_form = true
                                    this.openQuestion()
                                    RedForm.remove()
                                }
                            })
                        } else {
                            this.openQuestion()
                        }
                        clearInterval(openTimer)
                    } else {
                        this.progress ++
                    }
                },1000);
            },500);
        },
        /**
         * 打开问答红包
         */
        openQuestion() {
            if(this.red.question === '1') {
                // 选择题
                let Question = this.$createQuestion({
                    is_show:new Date().getTime(),
                    type: 'choice',
                    reset: true,
                    data: this.red.choice_question,
                    onReset:() => {
                        Question.remove()
                        // 重开红包
                        this.$emit('reset')
                        this.openImageRed()
                    },
                    onConfirm: () => {
                        this.openRed()
                        Question.remove()
                    }
                })
            } else if(this.red.question === '2') {
                // 问答题
                let Question = this.$createQuestion({
                    is_show:new Date().getTime(),
                    type: 'answer',
                    reset: true,
                    data: this.red.answer_question,
                    onReset:() => {
                        Question.remove()
                        // 重开红包
                        this.$emit('reset')
                        this.openImageRed()
                    },
                    onConfirm: () => {
                        this.openRed()
                        Question.remove()
                    }
                })
            } else {
                this.openRed()
            }
        },
        /**
         * 开视频红包给
         */
        openVideoRed(){
            if(this.show_submit_form) {
                let RedForm = this.$createRedForm({
                    is_show: true,
                    form_id: parseInt(this.red.red_form_id),
                    red_id: parseInt(this.red.id),
                    onClose:() => {
                        RedForm.remove()
                        this.$emit("changeUnder","not")
                    },
                    onSuccess: () => {
                        this.submit_form = true
                        this.openQuestion()
                        RedForm.remove()
                    }
                })
            } else {
                this.openQuestion()
            }
        },
        /**
         * 开红包
         */
        openRed() {
            this.$emit("changeUnder","remoting")
            open(this.red.id)
                .then((res) => {
                    let { code, err_msg } = res.data
                    if(code === 0){
                        this.$emit("changeUnder","success")
                    } else {
                        this.$createToast({
                            time: 2000,
                            txt: err_msg,
                            type: 'error',
                            mask: true
                        }).show()
                        this.$emit("changeUnder","error")
                    }
                })
        }
    }
}
</script>

<style scoped lang="less" src="./open-cover.less"></style>
